<template>
    <div class="main">
        <section>
            <div class="export-container">
                <el-date-picker
                        v-model="exportDate"
                        type="daterange"
                        size="small"
                        range-separator="至"
                        start-placeholder="统计开始日期"
                        end-placeholder="统计结束日期"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-button type="primary" size="small" plain @click="exportExcel">财务导出</el-button>
            </div>
            <el-form ref="searchForm" size="small" class="search-block" :model="listQuery" label-position="right" label-width="110px">
                <el-row :gutter="30">
                    <el-col :sm="24" :md="12" :lg="8" :xl="6">
                        <el-form-item label="手机号码：" prop="mobile">
                            <el-input @keyup.enter.native="search" v-model="listQuery.mobile" placeholder="手机号码" maxlength="25" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="12" :lg="8" :xl="6">
                        <el-form-item label="上级手机号码：" prop="highermobile">
                            <el-input @keyup.enter.native="search" v-model="listQuery.highermobile" placeholder="上级手机号码" maxlength="25" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="12" :lg="8" :xl="6">
                        <el-form-item label="达标箱数：" placeholder="达标箱数" prop="totalNumber">
                            <el-select v-model="listQuery.totalNumber" clearable>
                                <el-option :label="500" :value="500"></el-option>
                                <el-option :label="750" :value="750"></el-option>
                                <el-option :label="1000" :value="1000"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="12" :lg="8" :xl="6">
                        <el-form-item label="统计时间：" prop="createDate">
                            <el-date-picker
                                    v-model="listQuery.createDate"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset"  @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <div class="btn-block">
                <el-button type="success" size="small" :loading="exportLoading" plain @click="exportSearchResult">导出搜索结果</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="姓名" prop="realName" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="手机号码" prop="mobile" width="120"></el-table-column>
                <el-table-column align="center" label="用户等级" prop="role" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.role === 3">董事</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="个人购买箱数" prop="selfNumber" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="直招大区箱数" prop="areaNumber" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="下属董事团队箱数" prop="subNumber" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span class="view-detail" title="查看详情" v-text="scope.row.subNumber" @click="showDetail(scope.row)"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="总箱数" prop="totalNumber" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="上级董事合伙人" prop="higherDirector" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="上级董事合伙人手机号" prop="highermobile" min-width="100" show-overflow-tooltip></el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
    export default {
      name: 'boxStatistics',
      data(){
        return {
          exportDate: [],

          listQuery: {
            createDate: [],

            mobile: "",
            highermobile: "",
            totalNumber: '',
            startTime: '',
            endTime: '',
            pageIndex: 1,
            pageSize: 10
          },
          listLoading: false,
          list: [],
          listTotal: 0,

          exportLoading: false
        }
      },
      created(){
        this.getList();
      },
      methods: {
        getList(){
          this.listLoading = true;
          let createDate = this.listQuery.createDate;
          this.listQuery.startTime = (createDate && createDate.length) ? createDate[0] : '';
          this.listQuery.endTime = (createDate && createDate.length) ? createDate[1] : '';
          this.request({
            url: '/bsnl-box/city/querynum',
            method: 'post',
            data: this.listQuery
          }).then(({data, total}) => {
            this.list = data;
            this.listTotal = total;
            this.listLoading = false;
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
          });
        },
        search(){
          this.listQuery.pageIndex = 1;
          this.getList();
        },
        showDetail(row){
          this.listQuery.pageIndex = 1;
          this.listQuery.highermobile = row.mobile;
          this.getList();
        },
        // 清空搜索条件
        resetForm (formName) {
          this.$nextTick(() => {
            this.$refs[formName].resetFields()
          })
        },
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageIndex = val;
          this.getList();
        },
        exportExcel(){
          if(this.exportDate && this.exportDate.length){
            window.open(`${process.env.BOX_BASE_API}/bsnl-box/city/excel?startTime=${this.exportDate[0]}&endTime=${this.exportDate[1]}`)
          } else {
            this.$message.warning('请选择统计日期');
          }
        },
        // 导出搜索结果
        exportSearchResult(){
          let createDate = this.listQuery.createDate;
          this.listQuery.startTime = (createDate && createDate.length) ? createDate[0] : '';
          this.listQuery.endTime = (createDate && createDate.length) ? createDate[1] : '';
          window.open(`${process.env.BOX_BASE_API}/bsnl-box/city/cityexcel?mobile=${this.listQuery.mobile}&highermobile=${this.listQuery.highermobile}&totalNumber=${this.listQuery.totalNumber}&startTime=${this.listQuery.startTime}&endTime=${this.listQuery.endTime}`)
        }
      }
    }
</script>

<style lang="scss">
    .view-detail{
        color: #1e6abc;
        cursor: pointer;
    }
    .export-container{
        margin-bottom: 24px;

        .el-date-editor .el-range-separator{
            width: 6%;
        }
    }
</style>
